<template>
    <div>
      <el-scrollbar height="600px">
      <el-card>
        <el-row :gutter="20" class="header">
            <el-col :span="6">
              <el-input placeholder="请输入课程名称"
              style="width: 100%"
              v-model="queryInfo.name" clearable @clear="getCourseList"></el-input>
            </el-col>
            <el-col :span="6">
              <el-input placeholder="请输入课程序号"
              style="width: 100%"
              v-model="queryInfo.courseId" clearable @clear="getCourseList"></el-input>
            </el-col>
            <el-col :span="6">
              <el-input placeholder="请输入教师名称"
              style="width: 100%"
              v-model="queryInfo.teacher" clearable @clear="getCourseList"></el-input>
            </el-col>
            <el-col :span="6">
              <el-button type="primary" :icon="Search" @click="getCourseList">搜索</el-button>
            </el-col>
          </el-row>
        <el-col :span="4">
            <el-button type="primary" :icon="Plus"
            style="margin-top: 10px;margin-bottom: 10px;"
             @click="dialogVisible=true">加入课程</el-button>
          </el-col>
        <el-table :data="tableData" style="width: 100%;">
          <el-table-column type="index" width="50" />
          <el-table-column prop="courseId" label="课程序号" width="180" />
          <el-table-column prop="name" label="课程名" width="180" />
          <el-table-column prop="teacher" label="课程教师" />
          <el-table-column prop="profile" label="课程详情" />
          <el-table-column label="查看详情">
            <template v-slot="scope">
              <el-button @click="viewDetails(scope.row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background="true"
          layout="prev, pager, next"
          :total="total"
          v-model:currentPage="queryInfo.page"
          :page-size="queryInfo.size"
          @current-change="handlePageChange"
        />
      </el-card>
      <el-dialog
          title="加入课程"
          v-model="dialogVisible"
          >
          <el-form :model="courseId" label-width="140px">
              <el-form-item label="请输入课程号">
              <el-input v-model="joinInfo.courseId"></el-input>
              </el-form-item>
          </el-form>
          <el-form :model="teacherId" label-width="140px">
              <el-form-item label="请输入教师号">
              <el-input v-model="joinInfo.teacherId"></el-input>
              </el-form-item>
          </el-form>
          <template v-slot:footer>
              <span class="dialog-footer">
              <el-button @click="dialogVisible=false">取消</el-button>
              <el-button type="primary" @click="joinCourse">确认</el-button>
              </span>
          </template>
          </el-dialog>
        </el-scrollbar>
    </div>
  </template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { Search, Plus } from '@element-plus/icons-vue'
import { getCourse } from '@/api/courses'
import { joinCourses } from '@/api/joinCourse'
import { ElMessage } from 'element-plus'

const router = useRouter()

const total = ref(0)

const currentPage = ref(1)

const queryInfo = ref({
  courseId: '',
  name: '',
  teacher: '',
  page: currentPage,
  size: 5
})

const tableData = ref([])

const getCourseList = async () => {
  const res = await getCourse(queryInfo.value)
  console.log(res)
  tableData.value = res.data.data.rows
  total.value = res.data.data.total
}

const dialogVisible = ref(false)

const joinInfo = ref({
  courseId: '',
  teacherId: ''
})

const joinCourse = async () => {
  const res = await joinCourses(joinInfo.value)
  console.log(res)
  if (res.data.code === 0) {
    ElMessage.success('加入成功！')
  } else {
    ElMessage.error('请填写正确的课程号和教师号')
  }

  dialogVisible.value = false
}

const viewDetails = (row) => {
  console.log('查看详情', row)
  router.push({ name: 'CourseDetail', params: { courseId: row.courseId } })
}

const handlePageChange = () => {
  getCourseList()
}

onMounted(getCourseList)
</script>

<style>
.header{
  padding-bottom: 16px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
